<template>
	<div class="layout-com w-full h-full">
		<header class="w-full h-fit">
			<slot name="head"></slot>
		</header>
		<main class="w-full h-fit">
			<!-- 搜索 -->
			<el-row
				align="middle"
				justify="center"
				:class="marginTop"
				v-show="showSearchBox"
				class="transition-all duration-500 ease-in-out">
				<el-col :xs="20" :sm="14" :md="14" :lg="12" :xl="9">
					<!-- 搜索设置 -->
					<div class="search-setting flex items-center justify-center mb-4">
						<switch-com :items="searchOptions" @on-active-change="handleSearchActiveChange" />
					</div>
					<global-search v-model="searchKeyword" />
				</el-col>
			</el-row>
			<slot name="main"></slot>
		</main>
		<footer class="w-full h-fit">
			<slot name="footer">
				<div class="current-time w-full h-fit text-center text-gray-500 text-xs mt-10 pb-3">
					{{ currentDateTime }}
				</div>
			</slot>
		</footer>
	</div>
</template>

<script lang="ts">
import type { SwitchItem } from '~/components/SwitchCom/index.vue';

export default defineComponent({
	name: 'LayoutCom',
	setup(props) {
		// 搜索关键词
		const searchKeyword = ref<string>('');

		// 搜索选项
		const searchOptions: SwitchItem[] = [
			{ icon: 'devicon:reactnavigation', name: '站内', value: 'internal' },
			{ icon: 'simple-icons:baidu', name: '百度', value: 'baidu', iconColor: '#2932E1' },
			{ icon: 'logos:bing', name: 'Bing', value: 'bing' },
			{ icon: 'devicon:google', name: 'Google', value: 'google' },
		];

		// 搜索选项激活状态
		const handleSearchActiveChange = (active: { index: number; value: string }): void => {
			console.log('active: ', active);
		};

		const route = useRoute();
		// 控制搜索框只在 首页/导航 页显示
		const showSearchBox = computed<boolean>(() => {
			return route.path === '/' || route.path === '/navigation';
		});
		// 在导航页时，MarginTop 缩小
		const marginTop = computed<string>(() => {
			return route.path === '/navigation' ? 'mt-32' : 'mt-48';
		});

		// 时间
		const currentDateTime = ref<string>('0000-00-00 00:00:00');

		let timer: any;
		onMounted(() => {
			timer = setInterval(() => {
				currentDateTime.value = formatDateByNow();
			}, 1000);
		});

		onBeforeUnmount(() => {
			clearInterval(timer);
		});

		return {
			marginTop,
			currentDateTime,
			showSearchBox,
			searchKeyword,
			searchOptions,
			handleSearchActiveChange,
		};
	},
});
</script>

<style lang="scss" scoped></style>
